<template>
  <div class="container">
    <el-row class="" v-if="isOut">
      <el-col :span="24" align="right">
        <el-button class="ordinary" @click="back">返回</el-button>
      </el-col>
    </el-row>
    <div>
      <Table
        :loading="isLoading"
        :tableArr="tableDate"
        :pagination="pagination"
        :columns="columns"
        :width="100"
        :pageSize="pagination.limit"
        :showSize="true"
        :isCheckbox="true"
        @row-click="showDetail"
        :total="pagination.total"
        @currentChange="currentChange"
      >
        <template #operate="{ row }" width="20">
          <el-button size="small" class="ordinary" @click="showDetail(row)">详情</el-button>
        </template>
      </Table>
    </div>
  </div>
</template>
<script>
import SelectOption from '@/views/science/components/selectOption/index.vue'
import Table from '@/views/science/components/table/table.vue'
import { getToReadTables } from '../science/api/homePage'

import { onMounted, reactive, toRefs } from 'vue'
import tableHead from './dealHeader.json'
import { store } from '@/store/index'

export default {
  props: {
    isOut: {
      type: Boolean,
      default: true,
    },
  },
  components: {
    SelectOption,
    Table,
  },
  setup(props, { emit }) {
    // 发送请求
    onMounted(() => {
      // 获取数据字典
      getTableList()
    })

    let data = reactive({
      id: '',
      flag: 1,
      infoDialog: false,
      ids: [],
      pagination: { page: 1, limit: 10, total: 0 }, //分页
      isLoading: false,
      unitNameList: [],
      awardList: [],
      tableDate: [],
      columns: tableHead.toReadHeader,
      visible: false,
    })

    // 获取列表信息
    let getTableList = () => {
      ;(data.isLoading = true),
        getToReadTables(
          {
            readFlag: '1',
          },
          {
            pageNum: data.pagination.page,
            pageSize: data.pagination.limit,
          }
        )
          .then((res) => {
            ;(data.tableDate = res.data.data.records), (data.pagination.total = res.data.data.total)
            data.isLoading = false
          })
          .catch((err) => {
            data.isLoading = false
          })
    }

    // 分页

    let currentChange = (current) => {
      data.pagination.page = current

      getTableList()
    }

    // 编辑
    let handleEdit = (row) => {
      emit('changeProcess', row)
    }

    const showDetail = async (row) => {
      // await this.readTask(row.id)
      // store.dispatch('readingStore/readTask',row.id)
      // data.visible = true
      console.log(row, 'row')
      emit('changeProcess', row, '2')
    }
    let back = () => {
      emit('changeBoard')
    }

    return {
      ...toRefs(data),
      handleEdit,
      back,
      getTableList,
      currentChange,
      showDetail,
    }
  },
}
</script>
<style lang="scss">
.conUnitName {
  display: inline-block;
  width: 200px;
}

.container {
  background-color: white !important;
  padding: 20px;
}

.gy-cascader {
  .el-cascader-node {
    max-width: 250px;
  }
}
</style>
